<template>
  <div class="con UserManage">
    <div class="videoDome">
      <div class="main_title">
        <i class="iconfont el-icon-yonghuguanli"></i>&nbsp;{{
          activeName == "img" ? "用户管理" : "部门管理"
        }}
      </div>

      <el-tabs v-model="activeName" type="border-card">
        <el-tab-pane name="img">
          <span slot="label"><i class="el-icon-date"></i> 用户管理</span>
          <div class="comtimes">
            姓名：<el-input
              v-model="username"
              placeholder="请输入姓名"
              size="mini"
              @change="queryUser"
            ></el-input>
            所属部门：<el-select
              v-model="value"
              placeholder="请选择"
              size="mini"
            >
              <el-option value="">全部</el-option>
              <el-option
                v-for="item in deprtOptions"
                :key="item.branch_id"
                :label="item.branch_name"
                :value="item.branch_id"
              >
              </el-option>
            </el-select>
            <el-button
              type="primary"
              @click="queryUser()"
              class="el-icon-search"
              size="mini"
            >
              查询
            </el-button>
            <el-button
              type="primary"
              @click="addUser"
              class="el-icon-circle-plus-outline"
              size="mini"
            >
              添加用户
            </el-button>
          </div>

          <el-table
            :data="userTable"
            :row-style="{ height: 0 + 'px' }"
            :cell-style="{ padding: 5 + 'px' }"
            style="width: 100%"
            stripe
            height="66vh"
            :header-cell-style="tableHeaderColor"
          >
            <el-table-column prop="user_id" label="用户ID" width="80">
            </el-table-column>
            <el-table-column prop="username" label="用户名"> </el-table-column>
            <el-table-column prop="u_name" label="姓名"> </el-table-column>
            <el-table-column prop="sex" label="性别"> </el-table-column>
            <el-table-column prop="permissions" label="用户权限">
              <template slot-scope="scope">
                {{
                  scope.row.permissions == 0
                    ? "管理员"
                    : scope.row.permissions == 1
                    ? "巡视员"
                    : scope.row.permissions == 2
                    ? "测试员"
                    : "坐席员"
                }}
              </template>
            </el-table-column>
            <el-table-column prop="phone" label="手机号"> </el-table-column>
            <el-table-column prop="branch_name" label="部门"> </el-table-column>
            <el-table-column prop="wechat" label="微信号"> </el-table-column>
            <el-table-column
              prop="register_time"
              label="注册时间"
              width="170"
              center
            >
            </el-table-column>

            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-tooltip content="重置密码" placement="top" effect="dark">
                  <el-button
                    class="iconfont el-icon-zhongzhimima"
                    @click="showpartic(scope.row)"
                    type="primary"
                    size="mini"
                  ></el-button>
                </el-tooltip>
                <el-tooltip content="编辑" placement="top" effect="dark">
                  <el-button
                    class="el-icon-edit"
                    @click="paramSetting(scope.row)"
                    type="primary"
                    size="mini"
                  ></el-button>
                </el-tooltip>
                <el-tooltip content="删除" placement="top" effect="dark">
                  <el-button
                    class="el-icon-delete"
                    @click="deleteUser(scope.row)"
                    size="mini"
                  ></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            @size-change="handleSizeChange"
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-tab-pane>

        <el-tab-pane name="video">
          <span slot="label"><i class="el-icon-date"></i> 部门管理</span>

          <div class="comtimes">
            <!-- 所属部门：<el-select
              v-model="value"
              placeholder="请选择"
              size="mini"
            >
              <el-option value="">全部</el-option>
              <el-option
                v-for="item in deprtOptions"
                :key="item.branch_id"
                :label="item.branch_name"
                :value="item.branch_id"
              >
              </el-option>
            </el-select>
            <el-button
              type="primary"
              @click="inquery(2)"
              class="el-icon-search"
              size="mini"
            >
              查询
            </el-button> -->
            <el-button
              type="primary"
              @click="addDepartment"
              class="el-icon-circle-plus-outline"
              size="mini"
            >
              添加部门
            </el-button>
          </div>
          <el-table
            :data="deprtOptions"
            :row-style="{ height: 0 + 'px' }"
            :cell-style="{ padding: 5 + 'px' }"
            style="width: 100%"
            stripe
            height="66vh"
            :header-cell-style="tableHeaderColor"
          >
            <el-table-column prop="branch_id" label="部门编号" width="110">
            </el-table-column>
            <el-table-column prop="branch_name" label="部门名称">
            </el-table-column>
            <el-table-column prop="branch_boss" label="部门负责人">
            </el-table-column>
            <el-table-column prop="branch_deputy" label="副负责人">
            </el-table-column>

            <el-table-column prop="branch_phone" label="联系电话">
            </el-table-column>

            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-tooltip content="编辑" placement="top" effect="dark">
                  <el-button
                    class="el-icon-edit"
                    @click="editDep(scope.row)"
                    type="primary"
                    size="mini"
                  ></el-button>
                </el-tooltip>
                <el-tooltip content="删除" placement="top" effect="dark">
                  <el-button
                    class="el-icon-delete"
                    @click="deleteDep(scope.row)"
                    size="mini"
                  ></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <add-user-form ref="addUser" :deprtOptions="deprtOptions" />
    <el-dialog title="添加部门" :visible.sync="addDepartmentVisible" center>
      <el-form
        :model="depForm"
        :rules="rules"
        label-width="100px"
        ref="depForm"
      >
        <el-form-item label="部门负责人" prop="branch_boss">
          <el-input v-model="depForm.branch_boss"></el-input>
        </el-form-item>
        <el-form-item label="副负责人">
          <el-input v-model="depForm.branch_deputy"></el-input>
        </el-form-item>
        <el-form-item label="部门名称" prop="branch_name">
          <el-input v-model="depForm.branch_name"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="branch_phone">
          <el-input v-model="depForm.branch_phone"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="submitForm('depForm')">立 即 提 交</el-button>
        <el-button type="primary" @click="resetForm('form')">重 置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AddUserForm from "@/components/AddUserForm.vue";
import {
  SearchDeprtm,
  SearchUser,
  deleteUser,
  addBranch,
  updateBranch,
  deleteBranch,
} from "@/http";
export default {
  name: "UserManage",
  components: {
    AddUserForm,
  },
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      username: "",
      activeName: "img",
      addDepartmentVisible: false,
      value: "",
      deprtOptions: [],
      userTable: [],
      statusDep: true,
      depForm: {
        branch_id: "",
        branch_name: "", // 部门名称
        branch_boss: "", // 负责人
        branch_phone: "", // 负责人电话
        branch_deputy: "", // 副负责人
      },
      rules: {
        branch_name: [
          { required: true, message: "请输入部门名称!", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        branch_phone: [
          {
            required: true,
            message: "请输入正确的手机号",
            trigger: "blur",
            validator: checkPhone,
          },
        ],
        branch_boss: [
          { required: true, message: "请输入负责人!", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
      page: 1,
      limit: 10,
      total: 0,
    };
  },
  watch: {
    value() {
      this.queryUser();
    },
  },
  mounted() {
    this.queryDep();
    this.queryUser();
  },
  methods: {
    tableHeaderColor({ rowIndex }) {
      if (rowIndex === 0) {
        return "background-color: #009A9A;color: #fff;font-weight: 500;'font-size':'14px';height:20px;padding:8px 0";
      }
    },
    queryDep() {
      SearchDeprtm().then((res) => {
        this.deprtOptions = res.data;
      });
    },
    queryUser() {
      SearchUser({
        u_name: this.username,
        branch_id: this.value,
        page: this.page,
        limit: this.limit,
      }).then((res) => {
        this.userTable = res.data;
        this.total = res.count;
      });
    },
    handleCurrentChange(val) {
      this.page = val;
      this.queryUser();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.queryUser();
    },
    addUser() {
      this.$refs.addUser.addUserFormVisible = true;
      this.$refs.addUser.status = 0;
      // this.$refs.addUser.form = {};
    },
    showpartic(val) {
      // 密码重置
      this.$refs.addUser.addUserFormVisible = true;
      this.$refs.addUser.status = 1;
      this.$refs.addUser.form = val;
      console.log(this.$refs.addUser.form);
    },
    paramSetting(val) {
      this.$refs.addUser.addUserFormVisible = true;
      this.$refs.addUser.status = 2;
      this.$refs.addUser.form = val;
    },
    deleteUser(val) {
      this.$confirm(
        `此操作将永久删除改用户(${val.username}), 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          deleteUser({ user_id: val.user_id }).then(() => {
            this.queryUser();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addDepartment() {
      this.addDepartmentVisible = true;
      this.statusDep = true;
    },
    // 编辑部门
    editDep(val) {
      this.depForm = val;
      this.addDepartmentVisible = true;
      this.statusDep = false;
    },
    deleteDep(val) {
      this.$confirm(
        `此操作将永久删除改部门(${val.branch_name}), 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          deleteBranch({ branch_id: val.branch_id }).then(() => {
            this.queryDep();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.statusDep) {
            addBranch(this.depForm).then((res) => {
              res.result_code == 200
                ? (this.$message.success("添加成功"),
                  this.queryDep(),
                  (this.addDepartmentVisible = false))
                : this.$message.warning("添加失败");
            });
          } else {
            updateBranch(this.depForm).then((res) => {
              res.result_code == 200
                ? (this.$message.success("修改成功"),
                  this.queryDep(),
                  (this.addDepartmentVisible = false))
                : this.$message.warning("修改失败");
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.videoDome {
  width: 100%;
  height: 83.5vh;
  margin: 0;
}
.el-tabs--border-card {
  background: none;
  border: none;
}
.comtimes {
  margin-top: 10px;
  font-size: 14px;
  border-bottom: 1px solid #009688;
  margin-bottom: 10px;
  button {
    margin-left: 25px;
    margin-bottom: 15px;
  }
  .el-input {
    width: 200px;
  }
}
.el-icon-circle-plus-outline {
  background-color: #1ab394;
  border-color: #0d9c80;
}
</style>
